<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签展示</title>
</head>
<body>
    <h1>标签介绍图文件E:/visual code/html</h1><br/>
    <a id="标签展示页面"></a>
    <!-- 注释方法 -->
    <u>u下划线标签</u><br/><br/><br/>
    h标题标签自动加粗放大<br/>
    <h1>h1标题标签</h1>
    <h2>h2标题标签</h2>
    <h3>h3标题标签</h3>
    <h4>h4标题标签</h4>
    <h5>h5标题标签</h5>
    <h6>h6标题标签</h6>
    <del>del删除线标签</del><br/>
    <b>b加粗标签</b><br/>
    <strong>strong强调加粗标签(优先展示)</strong><br/>
    <cite>引用标签</cite><br/>
    下标签: 1<sub>下标签</sub><br/>
    上标签: 1<sup>上标签</sup><br/>
    br: 换行标签（等于一个回车<br/>
    p标签换段
    <h4> div style="width: 600px;" 设置宽度为600
        网页中展示自然段用p标签 </h4><br/>
    <div style="width: 600px;">
        <!-- div标签 块状标签默认高度0宽度整百 每个div标签自动换行-->
        <div>aaaa</div><div>bbbb</div>
        <span>ccccc</span><span>ddddd</span>
        <!-- span标签无意义 标签中的内容直接展示 一般对网页代码内容进行修饰 不换行-->
    <p>
        路上只我一个人，背着手踱着。
        这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。
        我爱热闹，也爱冷静;爱群居，也爱独处。
        像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。
        白天里一定要做的事，一定要说的话，现在都可不理。
        这是独处的妙处，我且受用这无边的荷香月色好了。
    </p>
    <p>
        曲曲折折的荷塘上面，弥望旳是田田的叶子。
        叶子出水很高，像亭亭旳舞女旳裙。
        层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
        微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。
        这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
        叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。
        叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。
    </p></div>

    <h4>ul无序列表展示 li代表每个列表项</h4>
    <ul type="circle">
        <!-- type='circle' 类型约束 circle空心的圆-->
        <li>看书</li>
        <li>上网</li>
        <li>爬山</li>
        <li>唱歌</li>
    </ul>
    <h4>ol有序列表展示</h4>
    <ol type="A">
        <!-- type="n" n指定列表前项排序方式 -->
        <li>看书</li>
        <li>上网</li>
        <li>爬山</li>
        <li>唱歌</li>
    </ol><hr/>
    <!-- hr 水平分割线标签 -->
    <h4>dl自定义列表 dd里内容有缩进效果 表达有层次效果的展示</h4>
    <dl>
        <dt>问: HTML是什么?</dt>
        <dd>答: 超文本标记语言。</dd>
        <dt>问: CSS是什么?</dt>
        <dd>答: 层叠样式表。</dd>
    </dl>
    <h2>常用标签图</h2>
    <img src="html\常用html标签.png" alt="常用标签图" width="500" title="常用标签图" border="1">
    <img src="html\常用html标签2.png" alt="常用标签图" width="500" height='300' title="常用标签图">
    <img src="html\常用html标签3.png" alt="常用标签图" width="500" title="常用标签图"><br/>
    <img src="html\百度.png" alt="百度" width="200" title="百度"><br/>
    <!-- img图片标签，不会自动换行-->
    <!-- alt加载失败后显示内容 -->
    <!-- title当鼠标移动到标签上时显示内容 -->
    <!-- width宽度设置-->
    <!-- height高度设置-->
    <!-- border边框粗细设置-->
    <!-- -->
    <a href="https://www.bilibili.com/video/BV1MK4y1n7TT/?p=3&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=71ee43d4d2832c5c262592c7d4532140">超链接</a><br/>
    <img src="html\bilibili.png" alt="bilibili" title="bilibili"><br/>   
    <a href="https://www.bilibili.com/" target="_blank">bilibili</a> <br/> <br/> <br/> <br/> <br/> <br/> <br/>    
    <!-- a超链接标签，href里写入超链接地址，a标签里写入显示内容，不自动换行，-->
    <!-- a超链接标签直接刷新当前网页并跳转到指定超链接网页-->
    <!-- target打开方式 详见常用标签4-->
    <a href="./html/玄派科技.png" target="_blank">图片实例</a><br/><br/><br/>

    
    
    <a href="#./1.html/AMD官网">AMD官网</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a id="./1.html/AMD官网"></a>
    <!-- 
        <a href="#n">n</a><br/>
        
        <a id="n">n（可命名，也可以空白）</a>锚点标签 
        锚点标签配合超链接标签使用可以定位同一网页，也可以不同网页内容.点链接定位锚点下方的内容
    -->
    
    <!-- table 表格标签 cellspacing设置表格中每个单元格之间的间距，cellpadding设置单元格中内容的与单元格四边最小间距,width设置表格中单元格的大小默认是由是单元格中的内容决定大小，也可以单独设置表格宽度,宽度设置数值可以是百分数。-->    
    <h1>表格实例</h1>
    <table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption> <h3>学生信息表</h3> </caption>
        <thead>
            <tr>    
                <th width="30%">学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
            </tr>
            


        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>mike</td>
                <td>236</td>
                <td rowspan="2" align="center" vallgn="top">23</td>
                <!--vallgn设置对齐上下左右 colspan设置行合并单元格数量 rowsoan设置列单元格合并数量-->

            </tr>
            <tr>
                <td>1002</td>
                <td>joker</td>
                <td>237</td>
                <!--<td>23</td>-->

            </tr>
            <tr>
                <td>1003</td>
                <td>jnner</td>
                <td>234</td>
                <td>27</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>jaker</td>
                <td>235</td>
                <td>26</td>
            </tr>
        </tbody>
        <tfoot>

        </tfoot>
    </table>
    <br/><br/>
    <br/><br/>
    <br/><br/>

    <h2>表单实例</h2>
    <form action="1.html" method="post">
        <!--method提交方式get为提交后网址上可见提交输入时可见内容，post为提交后内容不可见-->
        账号：<input type="text" name="uname" placeholder="账号/用户名/邮箱"/><br/><br/>
        <!-- 类型type为text文本型 输入是可见 明文-->
        密码：<input type="password" name="upass" placeholder="密码"/><br/><br/>
        <!-- 类型type为password密码型 输入时不可见 -->
        <input type="submit" value="登录"/><br/><br/>
        <!-- value值为提交键内显示内容-->
        <!--b表单具体参数查html网址-->
        性别 : <input type="radio" name="sex" value="1"/>男
        <input type="radio" checked name="sex" value="0"/>女<br/><br/><br/>
        爱好：<input type="checkbox" name="like" value="1"/>看书
        <input type="checkbox" checked name="like" value="2"/>写字
        <input type="checkbox" name="like" value="3"/>音乐
        <input type="checkbox" checked name="like" value="4/">游戏<br/><br/><br/><br/>
        <!-- checked默认选中标签，网页中默认选中带有checked的标签在网页中可以取消选取，checkbox复选标签-->
        头像： <input type="file" name="pic"/><br/><br/>
        邮箱： <input type="email" placeholder="请输入你的邮箱" name="charset"/><br/><br/>
        <!-- placeholder 占位符标签，给予文本框中提示语句-->
        年龄：<input type="number" min="18" max="80" name="number"/><br/><br/>
        指数： <input type="range" min="0" max="80" name="number"/><br/><br/>
        网址： <input type="url" readonly value="https://cn.bing.com/translator?ref=TThis&from=en&to=zh-Hans&isTTRefreshQuery=1" name="number"/><br/><br/>
        日历: <input type="date" name="date"><br/><br/>
        颜色: <input type="color" name="color"><br/><br/>
        学历：<select name="education" id="">
            <option value="1">大专</option>
            <option value="2" selected>本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
            <!--下拉框标签select，标签中包含option选项，选项中添加selected代表默认选中此项-->
        </select><br/><br/>
        简介： <textarea name="contents" id="" cols="50" rows="20">hello world</textarea><br/><br/>
        搜索： <input type="search" list="namelist" name="ketwords"/>
        <datalist id="namelist">
            <option value="zh-cn"></option>
            <option value="enlish"></option>
        </datalist>
        <br/><br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮"><br/><br/><br/>
        <input type="image" src="./html/amd.jpg">
    </form>

    <ul>
        <li><a href="https://cn.bing.com/translator?ref=TThis&from=en&to=zh-Hans&isTTRefreshQuery=1" target="myframe">ping翻译</a></li>
        <li><a href="https://www.w3school.com.cn/tags/tag_input.asp" target="myframe">xhtml标签查询</a></li>
        <li><a href="https://www.bilibili.com/" target="myframe">bilibili</a></li>
    </ul>

    <iframe src="https://www.bilibili.com/" frameborder="5" height="1000" width="80%" name="myframe"></iframe>
    <!-- iframe页面内框架标签 在一个页面内扩建出一个框架展示内容 -->


</body>
</html>
